<template>
  <div id="map"></div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>

<script>
import mapboxgl from "mapbox-gl"; //引入mapbox
import MapboxLanguage from '@mapbox/mapbox-gl-language'; //引入语言控件
export default {
  name: "mapboxdem",
  mounted () {
    //配置授权token
    mapboxgl.accessToken =
        "pk.eyJ1Ijoic21hbGx0aWdlcmJyb3RoZXIiLCJhIjoiY2s2eXRibHlwMG5odzNrczVzN282MXNpbiJ9.AGMkVduzRw2Puk99bksTKQ";
    //初始化地图
    var map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g", // the outdoors-v10 style but without Hillshade layers
        center: [114.2591, 30.515],
        zoom: 9
      });

      //添加dem数据
      map.on("load", function() {
        map.addSource("dem", {
          type: "raster-dem",
          url: "mapbox://mapbox.terrain-rgb"
        });
        map.addLayer(
          {
            id: "hillshading",
            source: "dem",
            type: "hillshade"
            // insert below waterway-river-canal-shadow;
            // where hillshading sits in the Mapbox Outdoors style
          },
          "waterway-river-canal-shadow"
        );
      });
      //设置语言为中文
      var language = new MapboxLanguage({defaultLanguage:'zh'});
      map.addControl(language);
  },
  methods: {

  }
};
</script>